<template>
	<view class="container">
		<u-popup :show="show" closeable :round="10" mode="center" bgColor="" :safeAreaInsetBottom="false" @close="$emit('close')">
			<view class="main_box">
				<view class="title">
					<text :style="{color: _temp_titleColor}">联系专属销售</text>
				</view>
				<view class="item_box">
					<text>客户经理：{{currentFirm.exJson.salesmanName || ''}}</text>
					<text>联系方式：{{currentFirm.exJson.salesmanPhone || ''}}</text>
				</view>
				<view class="button_box">
					<view class="button_item" :style="{border: `2rpx solid ${_temp_themeColor}`, color: _temp_themeColor}" @click="copy">复制号码</view>
					<view class="button_item" :style="{background: lightColor}" @click="phone">拨打电话</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { makeContrast, makeLightColor } from '@/tools/utils/colorful.js'
	import { mapState, mapActions, mapMutations } from 'vuex'
	export default {
		name:"salesman-popup",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			image: {
				type: Array,
				default: ''
			}
		},
		data() {
			return {
				
			};
		},
		computed: {
			...mapState('firm_store', ['currentFirm']),
			lightColor () {
				let light_color = makeLightColor(this._temp_themeColor, 0.2);
				let linearBack = `linear-gradient( to right, ${this._temp_themeColor}, ${light_color})`;
				return linearBack;
			}
		},
		methods: {
			phone () {
			    uni.makePhoneCall({
					phoneNumber: this.currentFirm.exJson.salesmanPhone
				})
			},
			copy (value) {
				uni.setClipboardData({
				    data: this.currentFirm.exJson.salesmanPhone,
				    success: (res) => {
						this.$emit('close');						
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		
		.main_box{
			width: 80vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 30rpx;
			box-sizing: border-box;
			
			.title{
				width: 100%;
				padding: 30rpx 20rpx;
				text-align: center;
				font-size: 36rpx;
				box-sizing: border-box;
			}
			.item_box{
				width: 100%;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.button_box{
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 20rpx;
				
				.button_item{
					height: 60rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 30rpx;
					line-height: 60rpx;
					color: #fff;
				}
			}
		}
	}
</style>